// 自己封装的工具函数

// 获取url参数
function getQueryString(url,key){
    var reg = new RegExp('[\?&]'+key+'=([^&=]*)','g');
    reg.test(url);
    return RegExp.$1;
}

// 生成 [min-max] 的随机整数
function randomInt(min,max){
    return Math.round(Math.random()*(max-min))+min;
}

// 生成16进制随机颜色值
function randomColor(){
    var color = '#';
    var str = '0123456789abcdef';
    for (var i = 0; i < 6; i++){
        var index = randomInt(0,15);// 生成0-15的随机整数
        color += str[index];
    }
    return color;
}

// 生成x位随机验证码
function randomCode(x){
    // 设置x的默认值
    x = x || 6;
    // ASCII码值范围：48-122（除了58-64和91-96这两个范围）
    var code = '';
    for (var i = 0; i < x; i++) {
        do {
            var ascii = randomInt(48,122);// 生成48-122的随机整数
        } while((ascii >= 58 && ascii <= 64) || (ascii >= 91 && ascii <= 96));
        code += String.fromCharCode(ascii);
    }
    return code;
}

// 获取元素的函数
function $(selector){
    var dom = document.querySelectorAll(selector);
    if (dom.length === 1) {
        // 返回单个元素
        return dom[0];
    } else {
        // 返回元素集合
        return dom;
    }
}

// 获取元素到页面左侧和顶部的距离
function offset(dom){
    // dom -> box3
    var left = 0 - dom.clientLeft;// 累加左侧的距离
    var top = 0 - dom.clientTop;// 累加顶部的距离
    while(dom){// dom -> box3 -> box2 -> box1 -> body -> null
        left += dom.clientLeft + dom.offsetLeft
        top += dom.clientTop + dom.offsetTop
        dom = dom.offsetParent;
    }
    return {'left':left,'top':top}
}

/**
 * 运动函数：animate
 * 
 * 参数说明：
 * dom 要运动的元素节点
 * attr 要运动的属性
 * target 运动的目标位置
 * callback 运动完成之后执行的回调函数，可选参数
 * 
 * 功能说明：
 * 1.支持带px单位的属性运动（left top right bottom width margin...）
 * 2.支持滚动条属性运动（scrollLeft scrollTop）
 * 3.支持透明度属性运动（opacity）
 */
 function animate(dom,attr,target,callback){
    // 根据不同属性获取当前值
    if (attr === 'opacity') {
        // 当前值和目标位置乘以100
        var current = getComputedStyle(dom)[attr] * 100;
        target = target * 100;
    }
    else if (attr === 'scrollLeft' || attr === 'scrollTop'){
        var current = dom[attr];
    }
    else {
        // 其他带px单位的属性
        var current = parseInt( getComputedStyle(dom)[attr] );// '50px' -> 50
    }

    // 启动计时器之前先清除
    clearInterval(dom.timer);
    dom.timer = setInterval(function (){
        // 生成持续变化的速度
        var speed = (target-current)/10;
        // 对speed取整（正数向上取整，负数向下取整）
        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

        // 当前值累加speed
        current += speed;

        // 判断是否到达目标位置（剩余运动量<=每次的运动量）
        if (Math.abs(target-current) <= Math.abs(speed)) {
            // 到达目标位置
            if (attr === 'opacity') {
                dom.style[attr] = target/100;
            }
            else if (attr === 'scrollLeft' || attr === 'scrollTop'){
                dom[attr] = target;
            }
            else {
                dom.style[attr] = target + 'px';
            }
            // 清除计时器
            clearInterval(dom.timer);
            console.log( '到达目标位置。。。' );
            typeof callback === 'function' && callback();
        } else {
            // 未到达目标位置
            if (attr === 'opacity') {
                dom.style[attr] = current/100;
            }
            else if (attr === 'scrollLeft' || attr === 'scrollTop'){
                dom[attr] = current;
            }
            else {
                dom.style[attr] = current + 'px';
            }
        }
    },20);
}
